<template>
  <el-row :gutter="20">
    <!-- 左侧部门树 -->
    <el-col :span="4" :xs="24">
      <ContentWrap class="h-1/1">
        <DeptTree @node-click="handleDeptNodeClick" />
      </ContentWrap>
    </el-col>
    <el-col :span="20" :xs="24">
      <!-- 搜索 -->
      <ContentWrap>
        <el-form
          class="-mb-15px"
          :model="queryParams"
          ref="queryFormRef"
          :inline="true"
          label-width="68px"
        >
          <el-form-item :label="t('systemUser.fields.nickname')" prop="nickname">
            <el-input
              v-model="queryParams.nickname"
              :placeholder="t('common.inputTextPlaceholder') + t('systemUser.fields.nickname')"
              clearable
              @keyup.enter="handleQuery"
              class="!w-240px"
            />
          </el-form-item>
          <el-form-item :label="t('systemUser.fields.jobCode')" prop="jobCode">
            <el-input
              v-model="queryParams.jobCode"
              :placeholder="t('common.inputTextPlaceholder') + t('systemUser.fields.jobCode')"
              clearable
              @keyup.enter="handleQuery"
              class="!w-240px"
            />
          </el-form-item>
          <el-form-item :label="t('systemUser.fields.createTime')" prop="createTime">
            <el-date-picker
              v-model="queryParams.createTime"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="datetimerange"
              :start-placeholder="t('common.startTimeText')"
              :end-placeholder="t('common.endTimeText')"
              class="!w-240px"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery">
              <Icon icon="ep:search" />
              {{ t('common.search') }}
            </el-button>
            <el-button @click="resetQuery">
              <Icon icon="ep:refresh" />
              {{ t('common.reset') }}
            </el-button>
            <el-button type="danger" @click="handleSync">
              <Icon icon="ep:switch" />
              {{ t('common.sync') }}
            </el-button>
            <el-button
              type="primary"
              plain
              @click="openForm('create')"
              v-hasPermi="['system:mentor:create']"
            >
              <Icon icon="ep:plus" />
              {{ t('action.add') }}
            </el-button>
          </el-form-item>
        </el-form>
      </ContentWrap>
      <ContentWrap>
        <vxe-toolbar ref="toolbarRef" custom />
        <vxe-table
          id="iAdminUser-table"
          ref="tableRef"
          v-loading="loading"
          :data="list"
          stripe
          :custom-config="vxeTableConfig"
          :column-config="{ resizable: true }"
          :size="vxeTableSize"
        >
          <vxe-column
            :title="t('systemUser.fields.id')"
            field="id"
            align="center"
            show-header-overflow
            show-overflow
            width="80"
          />
          <vxe-column
            :title="t('systemUser.fields.username')"
            field="username"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.mentorPhoto')"
            field="mentorPhoto"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
          >
            <template #default="scope">
              <el-image
                class="mentor-avatar"
                :src="scope.row.mentorPhoto"
                :preview-src-list="[scope.row.mentorPhoto]"
                fit="cover"
              />
            </template>
          </vxe-column>
          <vxe-column
            :title="t('systemUser.fields.nickname')"
            field="nickname"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
          />
          <vxe-column
            :title="t('systemUser.fields.jobCode')"
            field="jobCode"
            align="center"
            show-header-overflow
            show-overflow
            min-width="75"
          />
          <vxe-column
            :title="t('systemUser.fields.mobile')"
            field="mobile"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.email')"
            field="email"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.identity')"
            field="identity"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.sex')"
            field="sex"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          >
            <template #default="scope">
              <dict-tag
                v-if="scope.row.sex"
                :type="DICT_TYPE.SYSTEM_USER_SEX"
                :value="scope.row.sex"
              />
            </template>
          </vxe-column>
          <vxe-column
            :title="t('systemUser.fields.deptName')"
            field="deptName"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
          />
          <vxe-column
            :title="t('systemUser.fields.workingStatus')"
            field="workingStatus"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          >
            <template #default="scope">
              <dict-tag
                v-if="scope.row.workingStatus"
                :type="DICT_TYPE.WORKING_STATUS"
                :value="scope.row.workingStatus"
              />
            </template>
          </vxe-column>
          <vxe-column
            :title="t('systemUser.fields.imrStatus')"
            field="imrStatus"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          >
            <template #default="scope">
              <dict-tag
                v-if="scope.row.imrStatus"
                :type="DICT_TYPE.WORKING_STATUS"
                :value="scope.row.imrStatus"
              />
            </template>
          </vxe-column>

          <vxe-column
            :title="t('systemUser.fields.gjdqm')"
            field="gjdqm"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.mzm')"
            field="mzm"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.sfzjlxm')"
            field="sfzjlxm"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.sfzh')"
            field="sfzh"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.csrq')"
            field="csrq"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.sfxwds')"
            field="sfxwds"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.dslbm')"
            field="dslbm"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
          />
          <vxe-column
            :title="t('systemUser.fields.dslxm')"
            field="dslxm"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
          />
          <vxe-column
            :title="t('systemUser.fields.zcm')"
            field="zcm"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
          />
          <vxe-column
            :title="t('systemUser.fields.zcjbm')"
            field="zcjbm"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
          />
          <vxe-column
            :title="t('systemUser.fields.zyyjfx')"
            field="zyyjfx"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
          />
          <vxe-column
            :title="t('systemUser.fields.rsdny')"
            field="rsdny"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.rbdny')"
            field="rbdny"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.xwdsszdw')"
            field="xwdsszdw"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.jzgdqztm')"
            field="jzgdqztm"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.wyyzm')"
            field="wyyzm"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.wyslcdm')"
            field="wyslcdm"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.zgxlm')"
            field="zgxlm"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.byny')"
            field="byny"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.byxx')"
            field="byxx"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.byzym')"
            field="byzym"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.zgxwm')"
            field="zgxwm"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.syxwny')"
            field="syxwny"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.syxwxx')"
            field="syxwxx"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.syxwzy')"
            field="syxwzy"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.gyzgxw')"
            field="gyzgxw"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.gwsyxwsj')"
            field="gwsyxwsj"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.gwsyxwxx')"
            field="gwsyxwxx"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.gwshxwzy')"
            field="gwshxwzy"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.xzzw')"
            field="xzzw"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.sfzs')"
            field="sfzs"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.zcpdsj')"
            field="zcpdsj"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.sfwjds')"
            field="sfwjds"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.rsszdw')"
            field="rsszdw"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.yddh')"
            field="yddh"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
          />
          <vxe-column
            :title="t('systemUser.fields.dzyj')"
            field="dzyj"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
          />
          <vxe-column
            :title="t('systemUser.fields.dwdh')"
            field="dwdh"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.zzdh')"
            field="zzdh"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.gzdw')"
            field="gzdw"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.txdz')"
            field="txdz"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.yzbm')"
            field="yzbm"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.cz')"
            field="cz"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.zyshxwttjz')"
            field="zyshxwttjz"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.grjj')"
            field="grjj"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.zykygzycj')"
            field="zykygzycj"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.bz')"
            field="bz"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.hxwsj')"
            field="hxwsj"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.sfzzdszg')"
            field="sfzzdszg"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.rsgxszdwsfbx')"
            field="rsgxszdwsfbx"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.syxwxxdm')"
            field="syxwxxdm"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />
          <vxe-column
            :title="t('systemUser.fields.zjlxm')"
            field="zjlxm"
            align="center"
            show-header-overflow
            show-overflow
            min-width="100"
            :visible="false"
          />

          <vxe-column
            :title="t('common.operate')"
            field="operator"
            align="center"
            show-header-overflow
            show-overflow
            fixed="right"
            width="80"
          >
            <template #default="scope">
              <div class="flex items-center justify-center">
                <el-button
                  type="primary"
                  link
                  @click="openForm('update', scope.row.id)"
                  v-hasPermi="['system:mentor:create']"
                >
                  <Icon icon="ep:edit" />
                  {{ t('action.edit') }}
                </el-button>
                <!--                <el-button-->
                <!--                  type="primary"-->
                <!--                  link-->
                <!--                  @click="handleDelete(scope.row.id)"-->
                <!--                  v-hasPermi="['system:mentor:delete']"-->
                <!--                >-->
                <!--                  <Icon icon="ep:refresh-left" />-->
                <!--                  {{ t('action.revokeMentor') }}-->
                <!--                </el-button>-->
              </div>
            </template>
          </vxe-column>
        </vxe-table>

        <Pagination
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </ContentWrap>
    </el-col>
  </el-row>

  <!-- 添加或修改用户对话框 -->
  <MentorForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import download from '@/utils/download'
import * as UserApi from '@/api/system/user'
import MentorForm from './MentorForm.vue'
import DeptTree from './DeptTree.vue'
import type { VxeTableInstance, VxeTablePropTypes, VxeToolbarInstance } from 'vxe-table'
import { useAppStore } from '@/store/modules/app'

defineOptions({ name: 'SystemMentor' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const toolbarRef = ref<VxeToolbarInstance>()
const tableRef = ref<VxeTableInstance>()

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  subUser: false,
  nickname: undefined,
  jobCode: undefined,
  deptId: undefined,
  isMentor: true,
  createTime: []
})
const queryFormRef = ref() // 搜索的表单

const vxeTableConfig: VxeTablePropTypes.CustomConfig = {
  storage: true,
  mode: 'drawer',
  checkMethod({ column }) {
    return !['seq', 'operator'].includes(column.field)
  }
}

const appStore = useAppStore()
const vxeTableSize = computed(() => appStore.getCurrentSizeVxe)

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await UserApi.getUserPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}

/** 处理部门被点击 */
const handleDeptNodeClick = async (row) => {
  queryParams.deptId = row.id
  await getList()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 导出按钮操作 */
const exportLoading = ref(false)
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await UserApi.exportUser(queryParams)
    download.excel(data, '用户数据.xlsx')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm(t('systemUser.mentor.revoke'))
    // 发起删除
    await UserApi.degenerateMentorToUser({ id: id })
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

const handleSync = async () => {
  try {
    await message.confirm(t('systemUser.mentor.syncTip'))
    const response = await UserApi.syncMentorNow()
    if (response) {
      message.success(t('systemUser.mentor.syncSuccess'))
    } else {
      message.error(t('systemUser.mentor.syncFail'))
    }
  } catch {}
}

/** 初始化 */
onMounted(() => {
  getList()

  const table = tableRef.value
  const toolbar = toolbarRef.value
  if (table && toolbar) {
    table.connect(toolbar)
  }
})
</script>

<style lang="scss" scoped>
.mentor-avatar {
  width: 80px;
  height: 80px;
  display: block;
  margin: 5px auto;
  border-radius: 6px;
}
</style>
